<template>
  <div class="taskManageHome">
    <van-nav-bar title="移库任务领取" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <div class="taskManageHome-form">
      <van-field
        size="large"
        ref="moveCode"
        v-model="moveTakeoutParams.moveCode"
        placeholder="请扫描移库任务号"
        @focus="moveCodeFocusClick"
        @click="moveCodeFocusClick"
        @keyup.enter.native="takeMoveTask"
        :readonly="moveCodeReadOnly"
      />
      <div class="pick-btn">
        <van-button type="primary" size="large" @click="takeMoveTask()">领取</van-button>
      </div>
    </div>
    <!-- 普通消息响应遮罩层 -->
    <van-overlay :show="showMsgOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">{{ showMsg }}</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="24" style="text-align:center">
              <van-button type="primary" @click="closeOverlay()">关闭</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>

    <!-- 跳转页面遮罩层 -->
    <van-overlay :show="gotoPageOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">{{ showGotoPageMsg }}</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="24" style="text-align:center">
              <van-col span="12" style="text-align:center">
                <van-button type="primary" @click="cancelGotoPage()">取消</van-button>
              </van-col>
              <van-col span="12" style="text-align:center">
                <van-button type="primary" @click="gotoTakeoutPage()">确定</van-button>
              </van-col>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>

    <!-- 加载遮罩 -->
    <van-overlay :show="showLoadingOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">加载中......</div>
          </van-row>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {getMoveTaskByUser, takeMoveTask} from "@/api/biz/moveTask/moveTask.js";
export default {
  name: "moveTask",
  data() {
    return {
      moveCodeReadOnly: false,
      moveTakeoutParams: {
        moveCode: "",
        user: ""
      },

      // 消息遮罩层参数
      showMsgOverlay: false,
      showMsg: "",

      // 加载遮罩
      showLoadingOverlay: false,

      // 页面跳转
      gotoPageOverlay: false,
      showGotoPageMsg: ""
    };
  },
  computed: {
    ...mapGetters("user", ["userData"]),
    ...mapGetters("scanner", ["pdaScanData"])
  },
  watch: {
    pdaScanData: {
      handler(data) {
        this.scanEvent(data.data);
        let input = document.activeElement.id;
        if (input == "moveCode") {
          this.moveTakeoutParams.moveCode = data.data;
          this.moveCodeFocus();
        }
      },
      deep: true
    }
  },
  created() {
    // 获取用户
    this.moveTakeoutParams.user = this.userData.sysUserLoginName;

    // 根据当前用户查询其是否存在未关闭的移库任务
    this.getMoveTaskByUser(this.moveTakeoutParams.user);

    this.$nextTick(() => {
      // 默认选中移库任务号
      this.$refs["moveCode"].focus();
    });
  },
  methods: {
    // 扫描枪扫描
    clickEvent() {
      this.scanData = [];
    },
    scanEvent(data) {
      this.scanData.push(data);
    },
    scanErrorEvent() {},
    cellClickEvent() {},

    // 根据当前用户查询其是否存在未关闭的移库任务
    getMoveTaskByUser(user) {
      let obj = {
        user: user
      };
      // 加载遮罩
      this.showLoadingOverlay = true;
      getMoveTaskByUser(obj).then(response => {
        // 关闭遮罩
        this.showLoadingOverlay = false;

        if (response.data.status) {
          if (response.data.data != undefined) {
            this.moveTakeoutParams.moveCode = response.data.data;

            this.gotoPageMsgShow("您有已领取未关闭的移库任务：" + this.moveTakeoutParams.moveCode + "，请点击确定，跳转至操作界面！");
          }
        }
      });
    },

    // 遮罩层消息展示设置
    msgShowTime(msg) {
      this.showMsg = msg;
      this.showMsgOverlay = true;
      // setTimeout(() => {
      //     this.showMsgOverlay = false;
      // }, 3000);
    },

    // 显示页面跳转提醒信息
    gotoPageMsgShow(msg) {
      this.showGotoPageMsg = msg;
      this.gotoPageOverlay = true;
    },

    // 取消页面跳转
    cancelGotoPage() {
      this.gotoPageOverlay = false;
      // 将焦点回到原位置
      this.moveCodeFocus();
    },
    // 跳转至移库下架页面
    gotoTakeoutPage() {
      this.gotoPageOverlay = false;
      // 将焦点回到原位置
      this.moveCodeFocus();

      // 跳转至新页面
      setTimeout(() => {
        this.$router.push({
          name: "moveTaskTakeout",
          params: {
            moveCode: this.moveTakeoutParams.moveCode
          }
        });
      }, 500);
    },

    // 关闭遮罩
    closeOverlay() {
      this.showMsgOverlay = false;
      // 将焦点回到原位置
      this.moveCodeFocus();
    },

    // 聚焦移库任务号
    moveCodeFocus() {
      this.$nextTick(() => {
        this.$refs.moveCode.focus();
      });
    },

    // 点击移库任务号
    moveCodeFocusClick() {
      this.moveCodeReadOnly = true;
      setTimeout(() => {
        this.moveCodeReadOnly = false;
      }, 200);
    },

    // 领取移库任务
    takeMoveTask() {
      if (this.moveTakeoutParams.moveCode == "") {
        this.msgShowTime("请先输入移库任务号！");
      }
      takeMoveTask(this.moveTakeoutParams).then(response => {
        if (response.data.status) {
          // 成功之后，跳转页面
          this.gotoPageMsgShow("移库任务号：" + this.moveTakeoutParams.moveCode + "领取成功，请点击确定，跳转至操作界面！");
        } else {
          this.moveTakeoutParams.moveCode = "";
          this.msgShowTime(response.data.message);
        }
      });
    },
    //返回方法
    onClickLeft() {
      this.$router.push({
        name: "moveTaskMenu"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.taskManageHome {
  &-form {
    margin: 30px 16px 16px;
    /deep/ .van-cell {
      &::after {
        left: 0;
      }
    }
    .pick-btn {
      margin-top: 30px;
      /deep/ .van-button--large {
        font-size: 50px;
        height: 120px;
      }
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.msgTxt {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}
</style>
